<template>
  <el-dialog
    title="新建/编辑用户"
    :visible.sync="dialogFormVisible"
    @close="closeDialog"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="ruleForm.sex"
          placeholder="请选择性别"
          style="float: left"
        >
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="tel">
        <el-input v-model="ruleForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" required>
        <el-col :span="11">
          <el-form-item prop="value">
            <el-cascader
              v-model="ruleForm.value"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              style="width: 100%"
              class="btnLeft cascader"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">&nbsp;</el-col>
        <el-col :span="12">
          <el-form-item prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="resetForm()">取消</el-button>
      </el-form-item>
    </el-form>

    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="determine(form)">确 定</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import bus from "@/utils/bus";
export default {
  name: "Dialog",
  data() {
    return {
      ruleForm: {
        id: null,
        name: "",
        sex: "",
        tel: "",
        value: [],
        address: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 5,
            message: "长度要在 2 到 5 个字符之间",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        tel: [
          { required: true, message: "请输入的手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        value: [
          {
            required: true,
            message: "请选择省份城市区",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          { min: 1, message: "至少输入 1 个字符", trigger: "blur" },
        ],
      },
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "番禺区",
                  label: "番禺区",
                },

                {
                  value: "越秀区",
                  label: "越秀区",
                },
                {
                  value: "花都区",
                  label: "花都区",
                },
                {
                  value: "海珠区",
                  label: "海珠区",
                },
                {
                  value: "从化区",
                  label: "从化区",
                },
                {
                  value: "增城区",
                  label: "增城区",
                },
                {
                  value: "南沙区",
                  label: "南沙区",
                },
                {
                  value: "黄埔区",
                  label: "黄埔区",
                },
                {
                  value: "白云区",
                  label: "白云区",
                },
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "荔湾区",
                  label: "荔湾区",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: ["tableData"],
  computed: {
    ...mapState({
      dialogFormVisible: (state) => state.dialog.dialogFormVisible,
      index: (state) => state.dialog.index,
      List: (state) => state.watchList.List,
      listId: (state) => state.watchList.listId,
    }),
  },
  created() {
    bus.$on("msgRow", (e) => {
      this.ruleForm = e;
      console.log(this.ruleForm);
    });
  },
  methods: {
    ...mapMutations(["closeDialogstate", "editIndex", "addList", "editList"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.index == null) {
            this.ruleForm.id = this.listId;
            // alert("submit!");
            // console.log(this.tableData);
            // this.tableData.push(this.ruleForm);
            this.addList(this.ruleForm);
            this.closeDialogstate();
            this.initialize();
            // console.log(this.ruleForm);
            // console.log(this.tableData);
          } else {
            // alert("submit!");
            // console.log(this.index);
            // this.$nextTick(() => [
            //   (this.tableData[this.index] = this.ruleForm),
            // ]);
            // this.$set(this.tableData, this.index, this.ruleForm);
            this.ruleForm.id = this.List[this.index].id;
            this.editList([this.index, this.ruleForm]);
            // this.tableData.splice(this.index, 1, this.ruleForm);
            // this.tableData[this.index] = this.ruleForm;
            // console.log(this.tableData);
            // this.tableData = Object.assign(
            //   {},
            //   {
            //     ...this.tableData,
            //   }
            // );
            this.editIndex(null);
            // console.log(1);
            this.closeDialogstate();
            this.initialize();
          }
        } else {
          console.log("error submit!!");
          console.log(this.tableData);
          return false;
        }
      });
    },
    //初始化弹窗内容
    initialize() {
      let arr = {
        id: null,
        name: "",
        sex: "",
        tel: "",
        value: [],
        address: "",
      };
      this.ruleForm = arr;
    },
    resetForm() {
      // this.$refs[formName].resetFields();
      this.closeDialogstate();
      this.editIndex(null);
      this.initialize();
    },
    //弹窗关闭按钮
    closeDialog() {
      this.closeDialogstate();
      this.editIndex(null);
      this.initialize();
    },
  },
};
</script>

<style></style>
